<script setup lang="ts">
import { watch, reactive, onBeforeMount, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ListQuery } from '@/views/system/dict/type';
import EditOutlined from '@iconify-icons/ant-design/edit-outlined';
import DeleteOutlined from '@iconify-icons/ant-design/delete-outlined';

import { getDictItemList, type DictItem } from '@/api/system/dict';
import { debounce } from 'lodash-es';
import RePagination from '@/components/RePagination';
import drawerUpdate from './drawerUpdate.vue';

defineOptions({
  name: 'DictMain'
});

const $props = defineProps({
  dictCode: {
    type: String,
    default: ''
  }
});
const $emit = defineEmits(['fetchDictItemList']);

const state = reactive({
  list: [] as DictItem[],
  total: 0,
  listLoading: false,
  listQuery: {
    itemCode: '',
    itemName: '',
    rows: 10,
    page: 1
  } as ListQuery,
  drawerUpdate: {
    value: {},
    visible: false,
    type: 'add',
    typeMap: {
      add: '新增字典项',
      update: '编辑字典项'
    }
  }
});

const drawerUpdateTitle = computed(() => {
  return state.drawerUpdate.typeMap[state.drawerUpdate.type];
});

const fetchDictItemList = () => {
  state.listLoading = true;
  getDictItemList({
    ...state.listQuery,
    dictCode: $props.dictCode
  })
    .then(({ code, data }) => {
      if (code !== 0) return;
      const { rows, total } = data;
      state.list = rows;
      state.total = total;
    })
    .finally(() => {
      state.listLoading = false;
    });
};
watch(
  () => $props.dictCode,
  value => {
    if (!String(value)) return;
    fetchDictItemList();
  }
);
const onAdd = () => {
  state.drawerUpdate.type = 'add';
  state.drawerUpdate.visible = true;
};
const onUpdate = row => {
  state.drawerUpdate.type = 'update';
  state.drawerUpdate.visible = true;
  state.drawerUpdate.value = row;
};
const onRemove = row => {
  ElMessageBox.confirm('确认要删除该字典项吗？', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功'
      });
    })
    .catch(() => {});
};

const debounceRestList = debounce(fetchDictItemList, 200);
onBeforeMount(() => {
  debounceRestList.cancel();
});
</script>

<template>
  <el-card class="border-none" shadow="never" :body-style="{ padding: '10px' }">
    <div class="flex item-center mb">
      <el-button type="primary" :disabled="!$props.dictCode" @click="onAdd">
        添加字典项
      </el-button>
      <div class="flex flex-1 items-center justify-end">
        <el-input
          v-model.trim="state.listQuery.itemName"
          class="w-[160px] mr"
          placeholder="字典项名称"
          clearable
          @change="debounceRestList"
        />
        <el-input
          v-model.trim="state.listQuery.itemCode"
          class="w-[160px]"
          placeholder="字典项值"
          clearable
          @change="debounceRestList"
        />
      </div>
    </div>
    <el-table
      v-loading="state.listLoading"
      :data="state.list"
      highlight-current-row
      height="calc(100vh - 244px)"
    >
      <el-table-column width="55" type="index" label="序号" align="center" />
      <el-table-column prop="itemName" label="字典项名称" align="center" />
      <el-table-column prop="itemCode" label="字典项值" align="center">
        <template #default="{ row }">
          <span class="bg-blue-100 rounded-full px-sm py-xxs text-primary">
            {{ row.itemCode }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="itemAttribute"
        width="140"
        label="字典项属性"
        align="center"
      >
        <template #default="{ row }">
          <div class="flex items-center justify-center">
            <template v-if="row.itemAttribute.length > 34">
              <el-tooltip
                effect="dark"
                :content="row.itemAttribute || ''"
                placement="top"
              >
                <span class="overflow-hidden text-ellipsis whitespace-nowrap">{{
                  row.itemAttribute
                }}</span>
              </el-tooltip>
            </template>
            <template v-else> -- </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="itemNo" width="70" label="排序号" align="center" />
      <el-table-column label="操作" align="center" width="160">
        <template #default="{ row }">
          <el-button link type="primary" @click="onUpdate(row)">
            <IconifyIconOffline class="mr-xs" :icon="EditOutlined" />
            编辑
          </el-button>
          <el-button link type="primary" @click="onRemove(row)">
            <IconifyIconOffline class="mr-xs" :icon="DeleteOutlined" />
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="state.total > 0" class="flex justify-end mt">
      <re-pagination
        v-model:page="state.listQuery.page"
        v-model:limit="state.listQuery.rows"
        :total="state.total"
        @pagination="fetchDictItemList"
      />
    </div>
    <drawer-update
      v-model="state.drawerUpdate.visible"
      size="540px"
      :value="state.drawerUpdate.value"
      :title="drawerUpdateTitle"
    />
  </el-card>
</template>
